<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useVocabStore } from '@/stores/vocab'
import WordSelectGrid from '@/components/WordSelectGrid.vue'

const router = useRouter()
const store = useVocabStore()
const selected = ref<string[]>([])
const loading = ref(false)
const error = ref('')
const result = ref<null | { vocabularySize: number, level: string, confidence: number }>(null)

async function submit() {
  store.round1.known.hard = [...selected.value]
  store.round1.unknown.hard = store.round1.words.hard.filter(w => !selected.value.includes(w))
  loading.value = true
  error.value = ''
  result.value = null
  try {
    const knownUnknownArr = (['easy', 'medium', 'hard'] as const).map(level => ({
      known: store.round1.known[level],
      unknown: store.round1.unknown[level]
    }))
    const res = await fetch('/api/estimate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(knownUnknownArr)
    })
    const json = await res.json()
    if (json.code === 1) {
      result.value = json.data
    } else {
      error.value = '估算失败'
    }
  } catch (e) {
    error.value = '网络错误'
  } finally {
    loading.value = false
  }
}

function restart() {
  store.reset()
  router.push('/')
}
</script>

<template>
  <div class="home-bg">
    <div class="home-center-full">
      <main class="vocab-main scrollable-main">
        <div class="logo-title">
          <span class="logo-emoji">📚</span>
          <span class="logo-text">词汇量估算</span>
        </div>
        <div class="subtitle">Vocabulary Size Estimator</div>
        <div class="progress-bar">
          <div class="progress" style="width:83%"></div>
        </div>
        <div class="desc">请选择你认识的单词</div>
        <div class="divider"></div>
        <div v-if="loading" class="info">提交中...</div>
        <div v-else-if="error" class="info">{{ error }}</div>
        <div v-else-if="result">
          <div class="result-box">
            <div class="result-emoji">🎉</div>
            <div class="result-title">你的词汇量为</div>
            <div class="result-num">{{ result.vocabularySize }}</div>
            <div class="result-detail">
              <span class="result-label">水平：</span><span class="result-value">{{ result.level || '-' }}</span>
            </div>
            <div class="result-detail">
              <span class="result-label">置信度：</span>
              <span class="result-value">{{ (result.confidence * 100).toFixed(1) }}%</span>
              <div class="confidence-bar">
                <div class="confidence-inner" :style="{width: (result.confidence * 100) + '%'}"></div>
              </div>
            </div>
          </div>
          <div class="btn-center">
            <button class="next-btn" @click="restart">再次测试</button>
          </div>
        </div>
        <div v-else>
          <div class="group-desc">已选 {{ selected.length }}/{{ store.round1.words.hard.length }}</div>
          <WordSelectGrid :words="store.round1.words.hard" v-model="selected" />
          <div class="btn-center">
            <button class="next-btn" @click="submit" :disabled="selected.length === 0">提交并查看结果</button>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped>
.home-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #e0e7ff 0%, #f5f6fa 40%, #f8fafc 100%);
  font-family: 'PingFang SC', 'HarmonyOS_Regular', 'Helvetica Neue', Arial, sans-serif;
}
.home-center-full {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scrollable-main {
  max-height: 92vh;
  overflow-y: auto;
  width: 100%;
}
.vocab-main {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(79,140,255,0.10), 0 1.5px 6px rgba(0,0,0,0.04);
  padding: 36px 48px 32px 48px;
  min-width: 340px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.logo-title {
  display: flex;
  align-items: center;
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: 2px;
}
.logo-emoji {
  font-size: 2.2rem;
  margin-right: 10px;
}
.logo-text {
  color: #3b4cca;
}
.subtitle {
  font-size: 1.05rem;
  color: #7b88a8;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.progress-bar {
  width: 100%;
  height: 10px;
  background: #e0e7ef;
  border-radius: 5px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(79,140,255,0.08);
}
.progress {
  height: 100%;
  background: linear-gradient(90deg, #4f8cff 60%, #3b4cca 100%);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(.4,2,.6,1);
}
.desc {
  color: #4f8cff;
  font-size: 1.13rem;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}
.divider {
  width: 60%;
  height: 1.5px;
  background: linear-gradient(90deg, #e0e7ef 60%, #c7d2fe 100%);
  margin: 10px 0 18px 0;
  border-radius: 1px;
}
.group-desc {
  font-size: 1.05rem;
  color: #888;
  margin-bottom: 10px;
}
.words-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 12px;
  width: 100%;
  margin-bottom: 24px;
}
.btn-center {
  width: 100%;
  display: flex;
  justify-content: center;
}
.next-btn {
  margin-top: 32px;
  padding: 12px 38px;
  font-size: 1.15rem;
  background: linear-gradient(90deg, #4f8cff 60%, #3b4cca 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79,140,255,0.10);
  transition: background 0.2s, transform 0.15s;
}
.next-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.next-btn:not(:disabled):hover {
  background: linear-gradient(90deg, #3b4cca 60%, #4f8cff 100%);
  transform: translateY(-2px) scale(1.04);
}
.title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 32px;
  letter-spacing: 2px;
  color: #111;
}
.info {
  text-align: center;
  color: #888;
  font-size: 1.1rem;
  margin: 32px 0;
}
.result-box {
  margin: 32px 0 18px 0;
  padding: 28px 18px 18px 18px;
  background: linear-gradient(135deg, #e0e7ff 0%, #f5f6fa 100%);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(79,140,255,0.10);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-emoji {
  font-size: 2.5rem;
  margin-bottom: 8px;
}
.result-title {
  font-size: 1.15rem;
  color: #3b4cca;
  margin-bottom: 6px;
}
.result-num {
  font-size: 2.8rem;
  font-weight: 700;
  color: #4f8cff;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.result-detail {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.result-label {
  color: #7b88a8;
}
.result-value {
  font-weight: 600;
  color: #3b4cca;
}
.confidence-bar {
  width: 120px;
  height: 10px;
  background: #e0e7ef;
  border-radius: 5px;
  margin-left: 8px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.confidence-inner {
  height: 100%;
  background: linear-gradient(90deg, #4f8cff 60%, #3b4cca 100%);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(.4,2,.6,1);
}
@media (max-width: 700px) {
  .vocab-main {
    min-width: 0;
    width: 98vw;
    padding: 18px 2vw 18px 2vw;
  }
  .words-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 8px;
  }
  .next-btn {
    width: 100%;
    font-size: 1.05rem;
    padding: 12px 0;
  }
  .result-box {
    padding: 18px 2vw 12px 2vw;
  }
}
</style> 